<script setup>
import InView from '@/components/InView.vue'
import MusicPlayer from '@/components/MusicPlayer.vue'
import { sleep } from '@/utils'
import PathAnimation from '@/components/PathAnimation.vue'

</script>

<template>
  <main>
    <PathAnimation/>
<!--      <img src="@/assets/images/n-logo-2.png" alt="Animated Image" class="animated-image">-->
    <div class="logo" />
    <div class="person animated zoomIn">
      <div class="title1">转眼十年，于历史长河只是一瞬</div>
      <div class="title2">但这十年间，凯翼汽车不断以优质的产品</div>
      <div class="title3">和服务回馈了全球数十万用户</div>
      <div class="title4">描摹和承载了全球 “Yi家人” 美好的出行生活</div>
    </div>
    <div class="title animated fadeIn delay-2x">
      <img src="@/assets/images/n-text-top.png" />
    </div>
    <InView class-name="divide" animate-class-name="fadeIn"/>
    <InView class-name="divide1" animate-class-name="fadeIn"/>
    <InView class-name="divide2" animate-class-name="fadeIn"/>
    <InView class-name="divide3" animate-class-name="fadeIn"/>
    <InView class-name="divide4" animate-class-name="fadeIn"/>
    <InView class-name="divide5" animate-class-name="fadeIn"/>
    <InView class-name="divide6" animate-class-name="fadeIn"/>
    <InView class-name="divide7" animate-class-name="fadeIn"/>
    <InView class-name="divide8" animate-class-name="fadeIn"/>
    <InView class-name="divide9" animate-class-name="fadeIn"/>
    <InView class-name="divide10" animate-class-name="fadeIn"/>
    <InView class-name="divide11" animate-class-name="fadeIn"/>
    <InView class-name="divide12" animate-class-name="fadeIn"/>
    <InView class-name="divide13" animate-class-name="fadeIn"/>
    <InView class-name="divide14" animate-class-name="fadeIn"/>
    <InView class-name="divide15" animate-class-name="fadeIn"/>
    <InView class-name="divide16" animate-class-name="fadeIn"/>
    <InView class-name="divide17" animate-class-name="fadeIn"/>
    <InView class-name="divide18" animate-class-name="fadeIn"/>
    <InView class-name="divide19" animate-class-name="fadeIn"/>
    <InView class-name="divide20" animate-class-name="fadeIn"/>
    <InView class-name="divide21" animate-class-name="fadeIn"/>
    <InView class-name="divide22" animate-class-name="fadeIn"/>
    <InView class-name="divide23" animate-class-name="fadeIn"/>
    <InView class-name="divide24" animate-class-name="fadeIn"/>
    <InView class-name="divide25" animate-class-name="fadeIn"/>
    <InView class-name="divide26" animate-class-name="fadeIn"/>
    <InView class-name="divide27" animate-class-name="fadeIn"/>
    <InView class-name="divide28" animate-class-name="fadeIn"/>
    <InView class-name="divide29" animate-class-name="fadeIn"/>
    <InView class-name="divide30" animate-class-name="fadeIn"/>
    <InView class-name="divide31" animate-class-name="fadeIn"/>
    <InView class-name="divide32" animate-class-name="fadeIn"/>
    <InView class-name="divide33" animate-class-name="fadeIn"/>
    <InView class-name="divide34" animate-class-name="fadeIn"/>
    <InView class-name="divide35" animate-class-name="fadeIn"/>
    <InView class-name="divide36" animate-class-name="fadeIn"/>
    <InView class-name="divide37" animate-class-name="fadeIn"/>
    <InView class-name="divide38" animate-class-name="fadeIn"/>
    <InView class-name="divide39" animate-class-name="fadeIn"/>
    <InView class-name="divide40" animate-class-name="fadeIn"/>
    <InView class-name="divide41" animate-class-name="fadeIn"/>
    <InView class-name="divide42" animate-class-name="fadeIn"/>
    <InView class-name="divide43" animate-class-name="fadeIn"/>
    <InView class-name="divide44" animate-class-name="fadeIn"/>
    <InView class-name="divide45" animate-class-name="fadeIn"/>
    <InView class-name="divide46" animate-class-name="fadeIn"/>
    <InView class-name="divide47" animate-class-name="fadeIn"/>
    <InView class-name="point" animate-class-name="fadeIn"/>
    <InView class-name="point point1" animate-class-name="fadeIn"/>
    <InView class-name="point point2" animate-class-name="fadeIn"/>
    <InView class-name="point point3" animate-class-name="fadeIn"/>
    <InView class-name="point point4" animate-class-name="fadeIn"/>
    <InView class-name="point point5" animate-class-name="fadeIn"/>
    <InView class-name="point point6" animate-class-name="fadeIn"/>
    <InView class-name="point point7" animate-class-name="fadeIn"/>
    <InView class-name="point point8" animate-class-name="fadeIn"/>
    <InView class-name="point point9" animate-class-name="fadeIn"/>
    <InView class-name="point point10" animate-class-name="fadeIn"/>
    <InView class-name="point point11" animate-class-name="fadeIn"/>
    <InView class-name="point point12" animate-class-name="fadeIn"/>
    <InView class-name="point point13" animate-class-name="fadeIn"/>
    <InView class-name="point point14" animate-class-name="fadeIn"/>
    <InView class-name="point point15" animate-class-name="fadeIn"/>
    <InView class-name="point point16" animate-class-name="fadeIn"/>
    <InView class-name="point point17" animate-class-name="fadeIn"/>
    <InView class-name="point point18" animate-class-name="fadeIn"/>
    <InView class-name="point point19" animate-class-name="fadeIn"/>
    <MusicPlayer />
  </main>
</template>

<style lang="scss" scoped>
main {
  height: 22383px;
  width: 1125px;
  overflow-x: hidden;
  padding-top: 107px;
  background: url('@/assets/images/n-bg2.jpg') no-repeat center center;
  background-size: cover;
  --animate-duration: 2s;
  position: relative;
}

.logo {
  width: 337px;
  height: 53px;
  margin-left: 98px;
  background: url('@/assets/images/n-logo.png') no-repeat center center;
  background-size: contain;
}

.person {
  margin: 388px 0 0 141px;
  height: 1331px;
  width: 100%;
  position: relative;
  font-family: SourceHanSansCN-Light;
  font-size: 40px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 100px;
  letter-spacing: 1px;
  color: #ffffff;
}

.animated-image {
  position: absolute;
  right: 61px;
  top: 2207px;
  width:122px;
  height: 86px;
  animation: move-image 10s linear infinite;
}

.title1 {
  margin-left: 133px;
}
.title2 {
  margin-left: 70px;
}
.title3 {
  margin-left: 151px;
}

.title {
  height: 335px;
  width: 779px;
  margin: 320px 0 0 89px;
  background-size: contain;
  img {
    width: 690px;
    display: block;
    margin: auto;
    transform: translateY(-10px);
  }
}

.divide {
  width: 597px;
  height: 485px;
  background: url('@/assets/images/n-p1.png') no-repeat center center;
  background-size: contain;
  margin-top: 100px;
}
.divide1 {
  width: 354px;
  height: 135px;
  background: url('@/assets/images/n-t1.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 174px;
  top: 2775px;
}
.divide2 {
  width: 238px;
  height: 136px;
  background: url('@/assets/images/n-t2.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 468px;
  top: 3094px;
}
.divide3 {
  width: 467px;
  height: 475px;
  background: url('@/assets/images/n-p2.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 3106px;
}
.divide4 {
  width: 284px;
  height: 208px;
  background: url('@/assets/images/n-t3.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 120px;
  top: 3340px;
}
.divide5 {
  width: 692px;
  height: 449px;
  background: url('@/assets/images/10.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 72px;
  top: 3584px;
}
.divide6 {
  width: 380px;
  height: 277px;
  background: url('@/assets/images/n-t4.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 168px;
  top: 4117px;
}
.divide7 {
  width: 482px;
  height: 298px;
  background: url('@/assets/images/1.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 74px;
  top: 4215px;
}
.divide8 {
  width: 719px;
  height: 446px;
  background: url('@/assets/images/n-p4-2.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 69px;
  top: 4483px;
}
.divide9 {
  width: 833px;
  height: 376px;
  background: url('@/assets/images/n-text-top-2.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 89px;
  top: 5059px;
}
.divide10 {
  width: 769px;
  height: 573px;
  background: url('@/assets/images/2.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 111px;
  top: 5406px;
}
.divide11 {
  width: 464px;
  height: 144px;
  background: url('@/assets/images/n-t5.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 78px;
  top: 5959px;
}
.divide12 {
  width: 393px;
  height: 285px;
  background: url('@/assets/images/n-t6.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 44px;
  top: 6183px;
}
.divide13 {
  width: 616px;
  height: 461px;
  background: url('@/assets/images/n-p6.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 47px;
  top: 6128px;
}
.divide14 {
  width: 452px;
  height: 206px;
  background: url('@/assets/images/n-t7.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 337px;
  top: 6580px;
}
.divide15 {
  width: 609px;
  height: 468px;
  background: url('@/assets/images/n-p7.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 6769px;
}
.divide16 {
  width: 608px;
  height: 499px;
  background: url('@/assets/images/n-p8.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 7122px;
}
.divide17 {
  width: 606px;
  height: 212px;
  background: url('@/assets/images/111.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 258px;
  top: 7407px;
}
.divide18 {
  width: 649px;
  height: 544px;
  background: url('@/assets/images/14.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 87px;
  top: 7575px;
}
.divide19 {
  width: 603px;
  height: 488px;
  background: url('@/assets/images/n-t9.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 40px;
  top: 7880px;
}
.divide20 {
  width: 840px;
  height: 378px;
  background: url('@/assets/images/n-text-top-3.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 80px;
  top: 8515px;
}
.divide21 {
  width: 535px;
  height: 215px;
  background: url('@/assets/images/n-t10.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 78px;
  top: 8898px;
}
.divide22 {
  width: 663px;
  height: 467px;
  background: url('@/assets/images/3.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 116px;
  top: 9078px;
}
.divide23 {
  width: 607px;
  height: 461px;
  background: url('@/assets/images/4.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 71px;
  top: 9541px;
}
.divide24 {
  width: 550px;
  height: 145px;
  background: url('@/assets/images/n-t11.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 232px;
  top: 10067px;
}
.divide25 {
  width: 866px;
  height: 643px;
  background: url('@/assets/images/n-p11.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 84px;
  top: 10214px;
}
.divide26 {
  width: 398px;
  height: 145px;
  background: url('@/assets/images/n-t12.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 391px;
  top: 10984px;
}
.divide27 {
  width: 686px;
  height: 461px;
  background: url('@/assets/images/5.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 126px;
  top: 11169px;
}
.divide28 {
  width: 636px;
  height: 215px;
  background: url('@/assets/images/n-t13.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 208px;
  top: 11716px;
}
.divide29 {
  width: 826px;
  height: 555px;
  background: url('@/assets/images/6.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 140px;
  top: 11963px;
}
.divide30 {
  width: 902px;
  height: 701px;
  background: url('@/assets/images/7.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 75px;
  top: 12529px;
}
.divide31 {
  width: 789px;
  height: 307px;
  background: url('@/assets/images/n-text-top-4.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 82px;
  top: 13410px;
}
.divide32 {
  width: 790px;
  height: 145px;
  background: url('@/assets/images/n-t14.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 108px;
  top: 13814px;
}
.divide33 {
  width: 805px;
  height: 603px;
  background: url('@/assets/images/n-p14.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 128px;
  top: 13981px;
}
.divide34 {
  width: 628px;
  height: 145px;
  background: url('@/assets/images/n-t15.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 194px;
  top: 14558px;
}
.divide35 {
  width: 882px;
  height: 606px;
  background: url('@/assets/images/15.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 121px;
  top: 14720px;
}
.divide36 {
  width: 462px;
  height: 145px;
  background: url('@/assets/images/n-t16.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 195px;
  top: 15491px;
}
.divide37 {
  width: 952px;
  height: 670px;
  background: url('@/assets/images/16.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 83px;
  top: 15630px;
}
.divide38 {
  width: 475px;
  height: 221px;
  background: url('@/assets/images/n-t17.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 108px;
  top: 16409px;
}
.divide39 {
  width: 876px;
  height: 674px;
  background: url('@/assets/images/17.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 97px;
  top: 16531px;
}
.divide40 {
  width: 847px;
  height: 307px;
  background: url('@/assets/images/n-text-top-5.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 77px;
  top: 17334px;
}
.divide41 {
  width: 573px;
  height: 215px;
  background: url('@/assets/images/n-t18.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 134px;
  top: 17807px;
}
.divide42 {
  width: 916px;
  height: 1160px;
  background: url('@/assets/images/n-p18.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 70px;
  top: 18052px;
}
.divide43 {
  width: 600px;
  height: 215px;
  background: url('@/assets/images/n-t19.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 185px;
  top: 19292px;
}
.divide44 {
  width: 915px;
  height: 661px;
  background: url('@/assets/images/n-p19.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 96px;
  top: 19554px;
}
.divide45 {
  width: 557px;
  height: 215px;
  background: url('@/assets/images/222.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 152px;
  top: 20362px;
}
.divide46 {
  width: 916px;
  height: 643px;
  background: url('@/assets/images/n-p20.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 70px;
  top: 20632px;
}
.divide47 {
  width: 841px;
  height: 374px;
  background: url('@/assets/images/n-foot.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 142px;
  top: 21473px;
}
.point {
  width: 34px;
  height: 34px;
  background: url('@/assets/images/n-point.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 110px;
  top: 2842px;
}
.point1 {
  right: 379px;
  top: 3168px;
}
.point2 {
  left: 420px;
  top: 3499px;
}
.point3 {
  right: 60px;
  top: 4148px;
}
.point4 {
  left: 567px;
  top: 5982px;
}
.point5 {
  left: 643px;
  top: 6172px;
}
.point6 {
  left: 204px;
  top: 6694px;
}
.point7 {
  left: 125px;
  top: 7428px;
}
.point8 {
  right: 216px;
  top: 7935px;
}
.point9 {
  left: 32px;
  top: 8898px;
}
.point10 {
  right: 295px;
  top: 10066px;
}
.point11 {
  right: 391px;
  top: 10901px;
}
.point12 {
  left: 214px;
  top: 11716px;
}
.point13 {
  left: 114px;
  top: 14213px;
}
.point14 {
  right: 107px;
  top: 14551px;
}
.point15 {
  right: 119px;
  top: 15491px;
}
.point16 {
  left: 61px;
  top: 16414px;
}
.point17 {
  left: 29px;
  top: 17973px;
}
.point18 {
  right: 122px;
  top: 19437px;
}
.point19 {
  left: 99px;
  top: 20369px;
}
</style>
